<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
    <link rel="stylesheet" href="../css/common.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="../js/article_render.js"></script>
    <script>
        $(function () {
            fetchAjax()
            function fetchAjax() {
                fetch('/article/' + getQueryVariable('articleId'))
                    .then(res => {
                        //console.log(res)
                        res.json().then(data => {
                            //console.log(data)
                            let renderObj = {
                                title: document.getElementById('render_h1'),
                                summary: document.getElementById('render_description'),
                                publishDate: document.getElementById('render_release'),
                                renderBody: document.getElementById('render_body'),
                                renderAuthor: {
                                    userName: document.getElementById('render_username'),
                                    userImg: document.getElementById('render_userimg')
                                }
                            }
                            document.title = data.title
                            document.getElementById('render_username').textContent=data.author
                            document.getElementById('render_release').textContent='发布日期：'+data.publishDate
                            document.getElementById('render_visitCount').textContent='浏览量：'+data.visitCount
                            document.getElementById('render_description').textContent=data.summary
                            render(renderObj, JSON.parse(data.content),new RenderCallback())
                            magnifyImg()
                        })
                    }).catch(err => {
                        console.log('错误')
                    })
            }
            function RenderCallback(){
                this.onFinished=function(){
                    console.log('渲染成功')
                }
                this.onFaulted=function(err){
                    alert('获取文章错误：'+err)
                    console.error(err)
                }
            }
            function getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) { return pair[1]; }
                }
                return (false);
            }
            function magnifyImg() {
                document.getElementById('magnify').addEventListener('click', function () {
                    document.getElementById('magnify').style.display = 'none'
                })
                Array.from(document.getElementsByTagName('img')).forEach(imgElement => {
                    imgElement.addEventListener('click', function (event) {
                        document.getElementById('magnify_img').setAttribute('src', imgElement.getAttribute('src'))
                        document.getElementById('magnify').style.display = 'flex'
                        event.stopPropagation()
                    })
                })
            }


        })
    </script>
    <style>
        .testimg {
            border: 2px solid red;
        }

        .article_render {
            max-width: 1000px;
            margin: auto;
        }

        .render_h1 {
            text-align: center;
        }

        .render_userimg {
            border-radius: 25px;
            height: 50px;
            width: 50px;
        }

        .article_render {
            padding: 30px;
        }

        .render_article_info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 30px;
            border-bottom: 1px solid var(--usual_linear_color);
            padding-bottom: 30px;
        }

        .render_description {
            color: var(--usual_description_color);
            margin-top: 30px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            font-size: var(--usual_description_size);
        }

        .render_body {
            margin-top: 30px;
        }

        .magnify {
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            width: 100%;
            top: 0;
            height: 100vh;
            display: none;
        }

        .magnify_img {
            margin: auto;
            width: 100%;
            max-width: 950px;
        }

        @media (max-width:768px) {
            .magnify_img {
                width: 100%;
            }
            video{
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="article_render">
        <div class="render_head">
            <h1 class="render_h1" id="render_h1">标题</h1>
            <div class="render_article_info">
                <span>
                    <img class="render_userimg" id="render_userimg"
                        src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=155080324,3796369687&fm=26&gp=0.jpg"
                        alt="">
                    <span id="render_username"></span>
                </span>
                <!-- <span>字数：13465</span> -->
                <span id="render_release">发布日期：</span>
                <span id="render_visitCount">浏览量：</span>
            </div>
        </div>
        <p class="render_description" id="render_description">为了能够让经济复苏、让学校复学、让社会活动逐渐恢复，不能长期把整个国家封闭起来，因此需要形成群体免疫。</p>
        <div class="render_body" id="render_body"></div>
    </div>
    <div class="magnify" id="magnify">
        <img id="magnify_img" class="magnify_img"
            src="https://pic1.zhimg.com/80/v2-83197788e5db89f10cd90c681c18f938_720w.jpg" alt="">
    </div>
</body>

</html>